Hace algún tiempo veíamos la forma de dividir un texto en dos columnas.
Cuando utilizamos unos estilos esporádicamente solemos añadirlos en la misma entrada de esa forma no recargamos la plantilla ni se hace interminable.
Cuando se trata de estilos que solemos usar de forma continúa es mucho mejor añadirlos en la plantilla. En este caso añadiríamos justo antes de ]]></b:skin> lo siguiente:
.texto-columnas {
-moz-column-count:2;
-moz-column-gap:15px;
-webkit-column-count: 2;
-webkit-column-gap: 15px;
}
En la entrada donde vamos a añadir las columnas:
<p class="texto-columnas">Texto</p>
Un ejemplo...
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Añadimos -moz- y -webkit- para que las propiedades se muestren en Firefox y Safari.
Con -moz-column-gap:15px es la distancia entre las dos columnas.
Podemos formar cualquier número de columnas simplemente aumentando el valor en -moz-column-count:2 y -webkit-column-count: 2;
.texto-columnas {
-moz-column-count:3;
-moz-column-gap:15px;
-webkit-column-count: 3;
-webkit-column-gap: 15px;
}
<p class="texto-columnas">Texto</p>
Otro ejemplo...
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
Naturalmente el espacio juega un papel importante, no hay que abusar de ellas de lo contrario la legibilidad sería un gran probema.
El último ejemplo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
REFERENCIA:CSS Portal
Gema, disculpa la molestia, pero quisiera poner eso que aparece abajo de los post, como links a post relacionados, pero no se hacerlo.
¿Me podrías decir como se llama asi busco la explicación?
Un beso!
(Este comentario si vale :D )
Si mi "hermana mayor" me lo permite, te recomiendo algo que implementé hace un par de semanas en mi blog y que hace el efecto que quieres pero con un estilo más visual pues utiliza imágenes previas de los posts relacionados según las etiquetas.
Se trata de LinkWithin y es facilísimo de colocar en Blogger. Se crea un widget justo debajo del cuerpo de las entradas y listo:
Espero que te sirva.
Saludos ;)
Muy bueno Gem@
No conocia estas propiedades.
¿Se ve bien en todos los exploradore o solo en los nuevos?
Hola Gema, me preguntaba si tienes alguna entrada que explique como poner esas cajas de texto que puedes subir y bajar con una barrita (como si fuera una mini pagina). No me refiero a las cajas de texto, porque lo que quiero es insertar banners de otros blogs en el interior sin que ocupe mucho espacio. No se como se llaman. Sabes cual es el codigo para insertar una?
Besos :)
Hola Gem@, mira t pregunto algo q nada q ver con esta entrada, pero ando buscando como poner iconos en mi blog pero sin que este en una entada de blog o un espacio de la sidebar..se entiende? Quiero colocar 3 iconos de face, twitter y fotolog pero sinq este en una cuadrado de la sidebar, sino que esten ubicados en algun costado del blog solitos..xq mi sidebar tiene imagen en el titulo de cada una muy muy grande..y quedaria muy mal...
hola gema,disculpá que me salga un poco del téma actual,me gustará saber cómo colocar en mi blog el cuadro que tiénes en la sidebar (blog de la semana)para poder colocar algunos blog de mi agrádo,desde ya muchas gracias por toda tu ayuda. chris...
:: Hola Stella, las entradas relacionadas que ves en mi blog no las tengo explicadas, lo hice siguiendo los pasos de JMiur te paso la url a
%% su blog pero la entrada en concreto no la localizo :(
Lo que comenta Jose son las entradas relacionadas en minituras, se trata de un widget %% LinkWithin
También puedes añadirlo manualmente, de esa forma consigues el mismo efecto pero sin el enlace al sitio que lo proporciona %% Etiquetas relacionadas.
En todos los casos lo que se muestra son etiquetas relacionadas, crea bastante confusión cuando decimos "Entradas relacionas" porque lo que se relaciona son las etiquetas :)
:: Gracias Jose una buena idea que a lo mejor le resulta útil :)
:: Hola Vku, en todos no, en Firefox y Safari si, en el resto se muestra como cualquier texto, es decir sin columnas :S
:: $...* Ahí van algunas ideas con barra y sin ella :)
%% Scroll de imágenes con enlace
%% Scroll de texto con imagen de fondo
%% Scroll con barra de color.
%% Scroll en cualquier parte.
:: Saludos Nessa en el lateral del blog sería un buen sitio, mira si esto se acerca a tu idea, sería necesario añadir más botones %% Imagen fija para Twitter
:: nochesamarillasg es un gadget personalizado %% Añadir estilos a un gadget también lo puedes hacer sin personalizar el gadget y añadiendo los estilos de borde a la imagen que es como yo lo tengo %% Efecto hover en bordes
Hola Gema, no se por qué no vengo más a menudo con lo agusto que estoy por aquí danzando :D
He visto a Vku y venía a decirte justo eso, abrí primero con el explorer y se veía como texto normal. No les queda nada a los de IE para ponerse a nivel ni nada...
:: Eso digo yo ¿por qué no vienes más a menudo? no me respondas ahora, hazlo después de la publicidad.
¿Qué es eso de IE? me suena a navegador y a tostadora :D Van algo despacio si.
Gracias por los enlaces, no tenia ni idea de los scrolls fueran eso, (la verdad es que nunca me habia parado a pensar lo que eran)
Besos
Mil gracias, Gema!!! Ya mismo voy a ver todo y a probarlo!
Besooos :)
:: Suerte $...* y Stella :D
:P gracia Gema lo aplicaré en un nuevo proyecto..
:: Estupendo Guadalupe :)
Muy interesante la entrada. He conseguido dividir el texto en dos columnas, pero si lo quiero dividir en 4 columnas sin tocar la plantilla del blog? (se trata solo de una entrada)
He intentado poner estos códigos en el HTML de la entrada, pero no me sale :-/
Gracias.
Nota: solo los miembros de este blog pueden publicar comentarios.